/**
 * @功能描述: 公用变量定义
 * @author: lzn
 * @date: 2022-09-20 15:30:17
 * @version: 1.0
 */
//命名空间 所有组件和样式的前缀
$namespace: 'yw';

/* Transition
 */
$all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
$fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$fade-linear-transition: opacity 200ms linear !default;
$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
$color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
$base-height:100% !default;
$base-width:100% !default;

/* Color
 */
/// 通用主题色
$color-primary: #409EFF !default;
/// 白色
$color-white: #FFFFFF !default;
/// 黑色
$color-black: #000000 !default;
$color-primary-light-1: mix($color-white, $color-primary, 10%) !default; /* 53a8ff */
$color-primary-light-2: mix($color-white, $color-primary, 20%) !default; /* 66b1ff */
$color-primary-light-3: mix($color-white, $color-primary, 30%) !default; /* 79bbff */
$color-primary-light-4: mix($color-white, $color-primary, 40%) !default; /* 8cc5ff */
$color-primary-light-5: mix($color-white, $color-primary, 50%) !default; /* a0cfff */
$color-primary-light-6: mix($color-white, $color-primary, 60%) !default; /* b3d8ff */
$color-primary-light-7: mix($color-white, $color-primary, 70%) !default; /* c6e2ff */
$color-primary-light-8: mix($color-white, $color-primary, 80%) !default; /* d9ecff */
$color-primary-light-9: mix($color-white, $color-primary, 90%) !default; /* ecf5ff */
/// 提示色
$color-success: #67C23A !default;
$color-warning: #E6A23C !default;
$color-danger: #F56C6C !default;
$color-info: #909399 !default;
$color-error: #ff4d4f !default;


$color-success-light: mix($color-white, $color-success, 80%) !default;
$color-warning-light: mix($color-white, $color-warning, 80%) !default;
$color-danger-light: mix($color-white, $color-danger, 80%) !default;
$color-info-light: mix($color-white, $color-info, 80%) !default;

$color-success-lighter: mix($color-white, $color-success, 90%) !default;
$color-warning-lighter: mix($color-white, $color-warning, 90%) !default;
$color-danger-lighter: mix($color-white, $color-danger, 90%) !default;
$color-info-lighter: mix($color-white, $color-info, 90%) !default;
/// color|1|Font Color|2
$color-text-primary: #303133 !default;
/// color|1|Font Color|2
$color-text-regular: #606266 !default;
/// color|1|Font Color|2
$color-text-secondary: #909399 !default;
/// color|1|Font Color|2
$color-text-placeholder: #C0C4CC !default;
/// color|1|Border Color|3
$border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$border-color-extra-light: #F2F6FC !default;

// Background
/// color|1|Background Color|4
$background-color-base: #F5F7FA !default;
$background-color-skeleton: rgba(190, 190, 190, 0.2) !default;

/* Link
 */
$link-color: $color-primary-light-2 !default;
$link-hover-color: $color-primary !default;

/* Border
 */
$border-width-base: 1px !default;
$border-style-base: solid !default;
$border-color-hover: $color-text-placeholder !default;
$border-base: $border-width-base $border-style-base $border-color-base !default;
/// borderRadius|1|Radius|0
$border-radius-base: 2px !default;
/// borderRadius|1|Radius|0
$border-radius-small: 2px !default;
/// borderRadius|1|Radius|0
$border-radius-circle: 100% !default;
/// borderRadius|1|Radius|0
$border-radius-zero: 0 !default;

// Box-shadow
/// boxShadow|1|Shadow|1
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
// boxShadow|1|Shadow|1
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
/// boxShadow|1|Shadow|1
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;

/* Fill
 */
$fill-base: $color-white !default;

/* Typography
 */
$line-height-base: 1.5715;
$font-path: 'fonts' !default;
$font-display: 'auto' !default;
/// fontSize|1|Font Size|0
$font-size-extra-large: 20px !default;
/// fontSize|1|Font Size|0
$font-size-large: 18px !default;
/// fontSize|1|Font Size|0
$font-size-medium: 16px !default;
/// fontSize|1|Font Size|0
$font-size-base: 14px !default;
/// fontSize|1|Font Size|0
$font-size-small: 13px !default;
/// fontSize|1|Font Size|0
$font-size-extra-small: 12px !default;
/// fontWeight|1|Font Weight|1
$font-weight-primary: 500 !default;
/// fontWeight|1|Font Weight|1
$font-weight-secondary: 100 !default;
/// fontLineHeight|1|Line Height|2
$font-line-height-primary: $line-height-base !default;
/// fontLineHeight|1|Line Height|2
$font-line-height-secondary: 16px !default;
$font-color-disabled-base: #bbb !default;

$font-color-base: #303131 !default;

/* Size
 */
$size-base: 14px !default;

/* z-index
 */
$index-normal: 1 !default;
$index-top: 1000 !default;
$index-popper: 2000 !default;

/* Disable base
 */
$disabled-fill-base: $background-color-base !default;
$disabled-color-base: $color-text-placeholder !default;
$disabled-border-base: $border-color-light !default;


/* Break-point
*/
$sm: 768px !default;
$md: 992px !default;
$lg: 1200px !default;
$xl: 1920px !default;

$breakpoints: (
  'xs' : (max-width: $sm - 1),
  'sm' : (min-width: $sm),
  'md' : (min-width: $md),
  'lg' : (min-width: $lg),
  'xl' : (min-width: $xl)
);


// svg icon
$icon-color-base: #666666 !default;
$icon-size-large: 20px;
$icon-size-base: 16px;
$icon-size-small: 12px;

// title
$title-size-1: 38px;
$title-size-2: 30px;
$title-size-3: 24px;
$title-size-4: 20px;
$title-size-5: 16px;

$title-line-height-1: 1.23;
$title-line-height-2: 1.35;
$title-line-height-3: 1.35;
$title-line-height-4: 1.4;
$title-line-height-5: 1.5;

// image
$image-background-mask: rgba(0,0,0,.5);

// avatar
$avatar-size-lg: 40px;
$avatar-size: 32px;
$avatar-size-sm: 24px;
$avatar-background-color: #ccc;
$avatar-font-lg:24px;
$avatar-font:18px;
$avatar-font-sm:14px;

/* DatePicker日期选择器
--------------------------*/
//字体颜色
$--datepicker-font-color: $color-text-regular !default;
//字体关闭颜色
$--datepicker-off-font-color: $color-text-placeholder !default;
//头部字体
$--datepicker-header-font-color: $color-text-regular !default;
//图标颜色
$--datepicker-icon-color: $color-text-primary !default;
//边框颜色
$--datepicker-border-color: $disabled-border-base !default;
//内部边框颜色
$--datepicker-inner-border-color: #e4e4e4 !default;
//范围背景色
$--datepicker-inrange-background-color: $border-color-extra-light !default;
//鼠标悬浮范围背景色
$--datepicker-inrange-hover-background-color: $border-color-extra-light !default;
//激活颜色
$--datepicker-active-color: $color-primary !default;
//悬浮字体颜色
$--datepicker-hover-font-color: $color-primary !default;
//悬浮单元格颜色
$--datepicker-cell-hover-color: #fff !default;
//基础高度
$--datepicker-base-height:$base-height !default;
//基础宽度
$--datepicker-base-width:$base-width !default;

/* timePicker日期选择器
--------------------------*/
//基础高度
$--timepicker-base-height:$base-height !default;
//基础宽度
$--timepicker-base-width:$base-width !default;
//基础最小高度
$--timepicker-base-min-height:1px !default;
//基础最小宽度
$--timepicker-base-min-width:1px !default;
//基础最大宽度
$--timepicker-base-max-width:50px !default;
//基础最大高度
$--timepicker-base-max-height:100px !default;
//鼠标悬浮范围背景色
$--timepicker-inrange-hover-background-color: $border-color-extra-light !default;
//字体颜色
$--timepicker-font-color: $color-text-regular !default;
//边框颜色
$--timepicker-border-color: $disabled-border-base !default;
//鼠标悬浮范围背景色
$--timepicker-inrange-hover-background-color: $border-color-extra-light !default;
//激活颜色
$--timepicker-active-color: $color-primary !default;
//悬浮字体颜色
$--timepicker-hover-font-color: $color-primary !default;


/* ywBaseDateRangePicker日期范围选择器
--------------------------*/
//基础高度
$--dateRangePicker-base-height: $base-height !default;
//基础宽度
$--dateRangePicker-base-width:$base-width !default;
//基础最小高度
$--dateRangePicker-base-min-height:1px !default;
//基础最小宽度
$--dateRangePicker-base-min-width:1px !default;
//鼠标悬浮范围背景色
$--dateRangePicker-inrange-hover-background-color: $border-color-extra-light !default;
//激活颜色
$--dateRangePicker-active-color: $color-primary !default;
//悬浮字体颜色
$--dateRangePicker-hover-font-color: $color-primary !default;

// list
$list-size-lg: 16px 24px;  // 用padding控制列表尺寸
$list-size: 12px 24px;
$list-size-sm: 8px 16px;
$list-padding-left: 24px;
$list-padding-left-sm: 16px;

// tag
$tag-padding: 7px;
$tag-background: #fafafa;
$tag-font-size: 12px;

// badge
$badge-line-height: 1;
$badge-font-size: 12px;
$badge-background-color: #ff4d4f;

// input
$input-font-size: $font-size-base;
$input-font-size-lg: $font-size-medium;
$input-icon-hover: $color-text-secondary;
$input-icon-active: $color-text-regular;
$input-focus-box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);

// tooltip
$tooltip-background-color: #000000bf;
// 提示框与内容距离
$tooltip-placement-padding: 8px;

// 蒙板颜色
$mask-color: #00000073;
// 悬浮框层级
$root-z-index: 1000;

//alert
// info
$info-background-color: #e6f7ff;
$info-border-color: #a4dcff;
$info-icon-color: #1890ff;
// success
$success-background-color: #f6ffed;
$success-border-color: #beed9a;
$success-icon-color: #52c41a;
// warning
$warning-background-color: #fffbe6;
$warning-border-color: #ffe2c5;
$warning-icon-color: #faad14;
// error
$error-background-color: #fff2f0;
$error-border-color: #ffe0dd;
$error-icon-color: #ff4d4f;
// close icon
$close-icon-color: #00000073;
